//搜索框
var t = null
function searchBook() {

    const searchInput = document.querySelector('.searchinput')
    const searchUl = document.querySelector('.searchul')
    const aoa = document.querySelector('.aoa')
    const loading = document.querySelector('.loading');

    aoa.innerHTML = `
        <div class="seatop">
            <div class="searchtitle">
            </div>
            <p>搜“${searchInput.value}”相关作品>></p>
        </div>
    `
    if (!searchInput.value.trim()) {
        searchUl.innerHTML = ''
        aoa.innerHTML = ''
        loading.style.display = 'none';


    }
    if (t) {
        clearTimeout(t)
    }
    t = setTimeout(function () {
        if (!searchInput.value) {
            loading.style.display = 'none';
            return;
        } else {
            loading.style.display = 'block';
        }

        fetch('https://app2.motie.com/search?objectType=2&word=' + searchInput.value + '&pageSize=2').then(res => res.json()).then(res1 => {
            // console.log(res1.data.bookList)

            searchUl.innerHTML = ''
            loading.style.display = 'none';
            res1.data.bookList.forEach(item => {
                searchUl.innerHTML += `
                    <li class="searchli" onclick="jumps(${item.id}) >
                        <img src=${item.authorIcon} alt="">
                        <div class="seatex">
                            <p class="p1">${item.name}</p>
                            <p>${item.authorName}</p>
                        </div>
                    </li>

                `

            })

        }).catch(err => {
            console.log(err)  //错误信息捕获
        })
    }, 500)


}


//返回顶部按钮
// 获取“返回顶部”按钮
const backToTopBtn = document.getElementById('backToTop');
// 监听页面滚动事件：滚动一定距离后，显示“返回顶部”按钮
window.addEventListener('scroll', () => {
    // 当滚动距离大于 300px 时，显示按钮；否则隐藏
    if (window.scrollY > 300) {
        backToTopBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
    }
});
// 监听按钮点击事件：点击后，页面平滑滚动到顶部
backToTopBtn.addEventListener('click', () => {
    // 使用 window.scrollTo 实现平滑滚动
    window.scrollTo({
        top: 0,             // 滚动到顶部（top: 0）
        behavior: 'smooth'  // 平滑滚动效果
    });
});


//畅销榜右侧内容
function content(time) {
    const loading2 = document.querySelectorAll('.loading2');

    loading2.forEach(loading => {
        loading.style.display = 'block';
    });

    fetch('https://app2.motie.com/ranking/all?siteId=2', {
        headers: {
            'os': 'pc',
        },
    }).then(res => res.json()).then(res1 => {


        // console.log(res1.data)
        res1.data.forEach(item => {
            if (item.name == '畅销榜') {
                // console.log(item.item)
                item.item.forEach(items => {

                    if (items.title == time) {
                        // console.log(items)
                        const top2Con = document.querySelector('.top2con')
                        top2Con.innerHTML = ''
                        items.content.slice(1).forEach((itemss, index) => {

                            loading2.forEach(loading => {
                                loading.style.display = 'none';
                            });
                            // console.log(itemss)
                            // 计算“第几个”（从 1 开始）
                            const order = index + 2;
                            // 定义“灰色类名”：order ≥ 4 时，添加 gray-style
                            const grayClass = order >= 4 ? 'gray-style' : '';


                            top2Con.innerHTML += `
                                <div class="top2" onclick="jumps(${itemss.bookId})">
                                    <div class="no ${grayClass}" >${order}</div>
                                    <div class="text">
                                        <p class="name2">${itemss.bookName}</p>
                                    </div>
                                </div>
                                `

                        })

                        const topConn = document.querySelector('.topconn')

                        topConn.innerHTML = `
                                <div class="top"  onclick="jumps(${items.content[0].bookId})">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `


                    }
                })
            } else if (item.name == '更新榜') {
                // console.log(item.name)
                item.item.forEach(items => {

                    //console.log(items)
                    const topConn4 = document.querySelector('.topconn4')
                    // console.log(items.content[0])
                    topConn4.innerHTML = `
                                <div class="top">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `



                })

            }
        })



    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}
content('日')

function tapp(event) {

    // 获取当前触发事件的li元素
    const currentLi = event.target.closest('li');
    if (!currentLi) return;

    // 移除所有li的li1类，添加li2类
    document.querySelectorAll('.tabs li').forEach(li => {
        li.classList.remove('li1');
        li.classList.add('li2');
    });

    // 给当前li添加li1类，移除li2类
    currentLi.classList.remove('li2');
    currentLi.classList.add('li1');

    // 执行内容切换
    content(currentLi.innerHTML);
}
//点击榜右侧内容
function content2(time) {
    const loading22 = document.querySelectorAll('.loading22');

    loading22.forEach(loading => {
        loading.style.display = 'block';
    });

    fetch('https://app2.motie.com/ranking/all?siteId=2', {
        headers: {
            'os': 'pc',
        },
    }).then(res => res.json()).then(res1 => {


        // console.log(res1.data)
        res1.data.forEach(item => {
            if (item.name == '点击榜') {
                // console.log(item.name)
                item.item.forEach(items => {
                    if (items.title == time) {
                        // console.log(items)
                        const top2Con2 = document.querySelector('.top2con2')
                        top2Con2.innerHTML = ''
                        items.content.slice(1).forEach((itemss, index) => {

                            loading22.forEach(loading => {
                                loading.style.display = 'none';
                            });
                            // console.log(itemss)
                            // 计算“第几个”（从 1 开始）
                            const order = index + 2;
                            // 定义“灰色类名”：order ≥ 4 时，添加 gray-style
                            const grayClass = order >= 4 ? 'gray-style' : '';


                            top2Con2.innerHTML += `
                                <div class="top2"  onclick="jumps(${itemss.bookId})">
                                    <div class="no ${grayClass}" >${order}</div>
                                    <div class="text">
                                        <p class="name2">${itemss.bookName}</p>
                                    </div>
                                </div>
                                `

                        })

                        const topConn2 = document.querySelector('.topconn2')

                        topConn2.innerHTML = `
                                <div class="top"  onclick="jumps(${items.content[0].bookId})">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `


                    }
                })

            }
        })



    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}
content2('日')
function tapp2(event) {
    // 获取当前触发事件的li元素
    const currentLi = event.target.closest('li');
    if (!currentLi) return;

    // 移除所有li的li1类，添加li2类
    document.querySelectorAll('.tabs2 li').forEach(li => {
        li.classList.remove('li1');
        li.classList.add('li2');
    });

    // 给当前li添加li1类，移除li2类
    currentLi.classList.remove('li2');
    currentLi.classList.add('li1');

    // 执行内容切换
    content2(currentLi.innerHTML);
    // console.log(currentLi.innerHTML)
}
//打赏榜右侧内容
function content3(time) {
    const loading3 = document.querySelectorAll('.loading3');

    loading3.forEach(loading => {
        loading.style.display = 'block';
    });

    fetch('https://app2.motie.com/ranking/all?siteId=2', {
        headers: {
            'os': 'pc',
        },
    }).then(res => res.json()).then(res1 => {


        // console.log(res1.data)
        res1.data.forEach(item => {
            if (item.name == '打赏榜') {
                // console.log(item.name)
                item.item.forEach(items => {
                    if (items.title == time) {
                        // console.log(items)
                        const top2Con22 = document.querySelector('.top2con22')
                        top2Con22.innerHTML = ''
                        items.content.slice(1).forEach((itemss, index) => {

                            loading3.forEach(loading => {
                                loading.style.display = 'none';
                            });
                            // console.log(itemss)
                            // 计算“第几个”（从 1 开始）
                            const order = index + 2;
                            // 定义“灰色类名”：order ≥ 4 时，添加 gray-style
                            const grayClass = order >= 4 ? 'gray-style' : '';


                            top2Con22.innerHTML += `
                                <div class="top2"  onclick="jumps(${itemss.bookId})">
                                    <div class="no ${grayClass}" >${order}</div>
                                    <div class="text">
                                        <p class="name2">${itemss.bookName}</p>
                                    </div>
                                </div>
                                `

                        })

                        const topConn22 = document.querySelector('.topconn22')

                        topConn22.innerHTML = `
                                <div class="top">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `


                    }
                })

            }
        })



    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}
content3('日')
function tapp3(event) {
    // 获取当前触发事件的li元素
    const currentLi = event.target.closest('li');
    if (!currentLi) return;

    // 移除所有li的li1类，添加li2类
    document.querySelectorAll('.tabs3 li').forEach(li => {
        li.classList.remove('li1');
        li.classList.add('li2');
    });

    // 给当前li添加li1类，移除li2类
    currentLi.classList.remove('li2');
    currentLi.classList.add('li1');

    // 执行内容切换
    content3(currentLi.innerHTML);
    // console.log(currentLi.innerHTML)
}
//推荐榜右侧内容
function content4(time) {
    const loading4 = document.querySelectorAll('.loading4');

    loading4.forEach(loading => {
        loading.style.display = 'block';
    });

    fetch('https://app2.motie.com/ranking/all?siteId=2', {
        headers: {
            'os': 'pc',
        },
    }).then(res => res.json()).then(res1 => {


        // console.log(res1.data)
        res1.data.forEach(item => {
            if (item.name == '推荐榜') {
                // console.log(item.name)
                item.item.forEach(items => {
                    if (items.title == time) {
                        // console.log(items)
                        const top2Con3 = document.querySelector('.top2con3')
                        top2Con3.innerHTML = ''
                        items.content.slice(1).forEach((itemss, index) => {

                            loading4.forEach(loading => {
                                loading.style.display = 'none';
                            });
                            // console.log(itemss)
                            // 计算“第几个”（从 1 开始）
                            const order = index + 2;
                            // 定义“灰色类名”：order ≥ 4 时，添加 gray-style
                            const grayClass = order >= 4 ? 'gray-style' : '';


                            top2Con3.innerHTML += `
                                <div class="top2"  onclick="jumps(${itemss.bookId})">
                                    <div class="no ${grayClass}" >${order}</div>
                                    <div class="text">
                                        <p class="name2">${itemss.bookName}</p>
                                    </div>
                                </div>
                                `

                        })

                        const topConn3 = document.querySelector('.topconn3')

                        topConn3.innerHTML = `
                                <div class="top">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `


                    }
                })

            }
        })



    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}
content4('日')
function tapp4(event) {
    // 获取当前触发事件的li元素
    const currentLi = event.target.closest('li');
    if (!currentLi) return;

    // 移除所有li的li1类，添加li2类
    document.querySelectorAll('.tabs4 li').forEach(li => {
        li.classList.remove('li1');
        li.classList.add('li2');
    });

    // 给当前li添加li1类，移除li2类
    currentLi.classList.remove('li2');
    currentLi.classList.add('li1');

    // 执行内容切换
    content4(currentLi.innerHTML);
    // console.log(currentLi.innerHTML)
}

//书评榜右侧内容
function content5(time) {
    const loading5 = document.querySelectorAll('.loading5');

    loading5.forEach(loading => {
        loading.style.display = 'block';
    });

    fetch('https://app2.motie.com/ranking/all?siteId=2', {
        headers: {
            'os': 'pc',
        },
    }).then(res => res.json()).then(res1 => {


        // console.log(res1.data)
        res1.data.forEach(item => {
            if (item.name == '书评榜') {
                // console.log(item.name)
                item.item.forEach(items => {
                    if (items.title == time) {
                        // console.log(items)
                        const top2Con5 = document.querySelector('.top2con5')
                        top2Con5.innerHTML = ''
                        items.content.slice(1).forEach((itemss, index) => {

                            loading5.forEach(loading => {
                                loading.style.display = 'none';
                            });
                            // console.log(itemss)
                            // 计算“第几个”（从 1 开始）
                            const order = index + 2;
                            // 定义“灰色类名”：order ≥ 4 时，添加 gray-style
                            const grayClass = order >= 4 ? 'gray-style' : '';


                            top2Con5.innerHTML += `
                                <div class="top2"  onclick="jumps(${itemss.bookId})">
                                    <div class="no ${grayClass}" >${order}</div>
                                    <div class="text">
                                        <p class="name2">${itemss.bookName}</p>
                                    </div>
                                </div>
                                `

                        })

                        const topConn5 = document.querySelector('.topconn5')

                        topConn5.innerHTML = `
                                <div class="top"   onclick="jumps(${items.content[0].bookId})">
                                    <div class="no">1</div>
                                    <img src=${items.content[0].bookIconUrl}
                                        alt="">
                                    <div class="text">
                                        <p class="name">${items.content[0].bookName}</p>
                                        <p class="author">作者：${items.content[0].authorName}</p>
                                    </div>
                                </div>
                                `

                    }

                })

            }
        })



    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}
content5('周')
function tapp5(event) {
    // 获取当前触发事件的li元素
    const currentLi = event.target.closest('li');
    if (!currentLi) return;

    // 移除所有li的li1类，添加li2类
    document.querySelectorAll('.tabs5 li').forEach(li => {
        li.classList.remove('li1');
        li.classList.add('li2');
    });

    // 给当前li添加li1类，移除li2类
    currentLi.classList.remove('li2');
    currentLi.classList.add('li1');

    // 执行内容切换
    content5(currentLi.innerHTML);
    // console.log(currentLi.innerHTML)
}


//左边点击切换函数
function leftTap(event) {
    const rightBar = document.querySelector('.rightbar');
    const rightBar2 = document.querySelector('.rightbar2');
    const allA2Items = document.querySelectorAll('.a2');
    allA2Items.forEach(item => {
        item.classList.remove('a1');
    });
    event.currentTarget.classList.add('a1');

    // 找到当前点击元素内的<p>标签
    const textElem = event.target.closest('.a2').querySelector('p');
    if (textElem) {

        // 去除文本两端的空白（如空格、换行）
        const text = textElem.textContent.trim();
        // console.log('实际文本：', text); // 查看实际文本，确认是否为“畅销榜”
        rightBar.style.display = 'none';
        rightBar2.style.display = 'block';



        const targetElem = event.target.closest('.a2');
        if (targetElem) {
            // 访问data-type（dataset会自动将连字符转为驼峰，所以是dataType）
            const type = targetElem.dataset.type;
            fetch(`https://app2.motie.com/ranking/detail?group=3&siteId=2&rankType=${type}&pageSize=30`)
                .then(res => res.json())
                .then(res1 => {
                    // console.log(res1);
                    // 后续渲染逻辑...

                    const connTop = document.querySelector('.conntop')
                    connTop.innerHTML = `
                    <div class="contop">
                            ${text}
                        </div>
                    `
                    const connss = document.querySelector('.connss')
                    connss.innerHTML = ''
                    res1.data.forEach(item => {
                        connss.innerHTML += `
                    <div class="connbo">
                            <img src="${item.bookIconUrl}" alt="">
                            <div class="text">
                                <p class="p1">${item.bookName}</p>
                                <p class="p2">${item.authorName} | ${item.categoryVO.name} | 连载 <span>${item.words} 总字数</span></p>
                                <p class="p3">你要争的，我便随你去争；你要守的，我便同你来守。</p>
                                <p class="p4">最近更新 ${item.lastChapterName} | <span>2025-09-03 23:54:50</span></p>

                            </div>

                        </div>

                    
                    `

                    })
                });
        }





    }
}

function jumps(id) {
    window.location.href = `./momo-bookDetail.html?id=${id}`

}
